<template>
  <!-- 添加材料对话框 -->
  <el-dialog v-model="visible" title="添加类型" width="400px" @close="close" destroy-on-close>
    <el-form ref="commodityAddRef" :model="commodityAdd" :rules="rules" label-position="right" label-width="100px">
      <el-row>
          <el-form-item label="名称：" prop="constructionType">
            <el-input v-model="commodityAdd.constructionType" />
          </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="计量名称：" prop="measurement">
          <el-input v-model="commodityAdd.measurement" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="单位：" prop="unit">
          <el-select placeholder="请选择单位" v-model="commodityAdd.unit" clearable>
            <el-option v-for="unit of units" :label="unit.unitName" :value="unit.unitId" :key="unit.unitId"></el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-row>
          <el-form-item label="所用产品：" prop="productId">
            <el-select placeholder="请选择产品" v-model="commodityAdd.productId" clearable>
              <el-option v-for="store of stores" :label="store.productName" :value="store.productId" :key="store.productId"></el-option>
            </el-select>
          </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="计量名称：" prop="measurementProduct">
          <el-input v-model="commodityAdd.measurementProduct" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="单位：" prop="unitProduct">
          <el-select placeholder="请选择单位" v-model="commodityAdd.unitProduct" clearable>
            <el-option v-for="unit of units" :label="unit.unitName" :value="unit.unitId" :key="unit.unitId"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="addCommodity">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { post, tip, WAREHOUSE_CONTEXT_PATH } from "@/common"
import { Plus } from '@element-plus/icons-vue'

// 该页面的可见性
const visible = ref(false);
// 图片回显路径
const imageUrl = ref('');

// 添加文件时的回显
const handleAvatarChange = (uploadFile) => {
  const reader = new FileReader();
  // 从上传组件中获取数据
  const image = uploadFile.raw;
  reader.readAsDataURL(image);
  // 读取文件的回调函数
  reader.onload = () => {
      // 将转化的url赋值给文件
      imageUrl.value = reader.result;
      commodityAdd.imgs = image.name;
  };
}

// 上传之前做简单验证
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpg'
    && rawFile.type !== 'image/jpeg'
    && rawFile.type !== 'image/png'
    && rawFile.type !== 'image/gif'
    && rawFile.type !== 'image/svg'
    && rawFile.type !== 'image/webp'
    ) {
    tip.error('只能上传图片格式!');
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    tip.error('上传文件不能大于5MB!');
    return false
  }
  return true;
}

// 添加材料对象
const commodityAdd = reactive({
  id: '',
  constructionType: '',
  measurement: '',
  unit:'',
  productId:'',
  measurementProduct:'',
  unitProduct:'',
  materialName: '',
  storeId: '',
  materialNum: '',
  unitId: '',
  introduce: '',
});

// 表单验证规则
const rules = reactive({
  constructionType: [
    { required: true, message: '请输入类型名称', trigger: 'blur' }
  ],
  measurement: [
    { required: true, message: '请输入计量名称', trigger: 'blur' }
  ],
  unit: [
    { required: true, message: '请选择单位', trigger: 'blur' }
  ],
  // measurementProduct: [
  //   { required: true, message: '请输入产品计量名称', trigger: 'blur' }
  // ],
  // unitProduct: [
  //   { required: true, message: '请选择产品单位', trigger: 'blur' }
  // ],
})

// 关闭
const close = () => {
  for(let prop in commodityAdd){
    commodityAdd[prop] = '';
  }
  
  visible.value = false;
}

// 所有仓库
const stores = ref();
// 所有品牌
const brands = ref();
// 所有分类
const categorys = ref();
// 所有供应商
const supplys = ref();
// 所有产地
const places = ref();
// 所有单位
const units = ref();

// 树形结构数据对应实体类属性
const defaultProps = {
  children: 'childProductCategory',
  label: 'typeName',
}

// 该对话框打开，进行数据初始化
const open = (storeList, unitList) => {
  visible.value = true;
  stores.value = storeList.value;
  units.value = unitList.value;
};

const commodityAddRef = ref();
// 定义
const emit = defineEmits(["ok"]);
// 添加材料提交
const addCommodity = () => {
  commodityAddRef.value.validate(valid => {
    if(valid){
      post('/constructionType/constructionType-add', commodityAdd).then(result => {
        emit('ok');
        tip.success(result.message);
        visible.value = false; // 关闭对话框
      });
    }
  });
}

defineExpose({ open });
</script>

<style scoped>
.avatar-uploader, .avatar-uploader .avatar{
  width: 100px;
  height: 100px;
  display: block;
}
</style>